<template>
  <div class="app">
    <h3>我是App组件</h3>
    <span>{{ name }}---{{ price }}</span>
    <Child></Child>
  </div>
</template>

<script>
import { provide, reactive, toRefs } from 'vue'
import Child from './components/Child.vue'
export default {
name:'App',
components:{Child},
setup(){
  let car =reactive({
    name:'奔驰',
    price:40
  })
  provide('car',car)  //给自己的后代组件传递数据
  return{
    ...toRefs(car)
  }
}
}
</script>

<style scoped>
.app{
  background-color: aqua;
  padding: 10px;
}
</style>